<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Merit - Bootstrap Agency Template</title>
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <meta content="" name="keywords">
  <meta content="" name="description">

  <!-- Favicons -->
  <link href="img/favicon.png" rel="icon">
  <link href="img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic|Raleway:400,300,700" rel="stylesheet">

  <!-- Bootstrap CSS File -->
  <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- Main Stylesheet File -->
  <link href="css/style.css" rel="stylesheet">


</head>


<body data-spy="scroll" data-offset="0" data-target="#gn-menu">
  <!-- ========== MAIN MENU ========== -->
  <div class="container">
    <ul id="gn-menu" class="gn-menu-main">
      <li class="gn-trigger">
        <a class="gn-icon gn-icon-menu"><span>Menu</span></a>
        <nav class="gn-menu-wrapper">
          <div class="gn-scroller">
            <ul class="gn-menu">
              <li class="gn-search-item">
                <input placeholder="Search" type="search" class="gn-search">
                <a class="gn-icon gn-icon-search"><span>Search</span></a>
              </li>
              <li><a href="#home" class="gn-icon gn-icon-home smoothscroll">Home</a></li>
              <li><a href="#services" class="gn-icon gn-icon-archive smoothscroll">Services</a></li>
              <li><a href="#portfolio" class="gn-icon gn-icon-pictures smoothscroll">Portfolio</a></li>
              <li><a href="#blog" class="gn-icon gn-icon-article smoothscroll">Blog</a></li>
              <li><a href="#prices" class="gn-icon gn-icon-bars smoothscroll">Prices</a></li>
              <li><a href="#contact" class="gn-icon gn-icon-envelop smoothscroll">Contact</a></li>
            </ul>
          </div>
          <!-- /gn-scroller -->
        </nav>
      </li>
      <li><a href="#home" class="smoothscroll">Merit</a></li>
    </ul>
  </div>
  <!-- /container -->

  <!-- ========== HEADER SECTION ========== -->
  <section id="home" name="home"></section>
  <div id="headerwrap">
    <div class="container">
      <div class="col-lg-2"></div>
      <div class="col-lg-8">
        <img src="img/logo.png">
        <h1>Merit Design Agency</h1>
        <h4>* Cooking Ideas Since 1998 *</h4>
      </div>
      <div class="col-lg-2">
      </div>
    </div>
    <!-- /container -->
  </div>
  <!-- /headerwrap -->


  <!-- ABOUT SECTION -->
  <section id="services" name="services"></section>
  <div class="container services">
    <h3>Our Services</h3>
    <hr>
    <br>
    <br>
    <div class="col-lg-3 service-line">
      <img src="img/services/s01.png">
      <h4>Social Media</h4>
      <br>
      <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
    </div>
    <!-- /col-lg-3 -->

    <div class="col-lg-3 service-line">
      <img src="img/services/s02.png">
      <h4>Research</h4>
      <br>
      <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
    </div>
    <!-- /col-lg-3 -->

    <div class="col-lg-3 service-line">
      <img src="img/services/s03.png">
      <h4>Development</h4>
      <br>
      <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
    </div>
    <!-- /col-lg-3 -->

    <div class="col-lg-3 service-line">
      <img src="img/services/s04.png">
      <h4>Design</h4>
      <br>
      <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
    </div>
    <!-- /col-lg-3 -->
  </div>
  <!-- /container -->


  <div class="container services">
    <br>
    <br>
    <h3>Our Philosophy</h3>
    <hr>
    <br>
    <br>
    <h4>"OUR JOB IS TO BUILD BRANDS. OUR PASSION IS BUILDING BRANDS FROM THE INSIDE OUT."</h4>
    <br>
    <br>
    <div class="col-lg-6">
      <p>Employees and consumers. Two halves of a brand’s entirety, the whole of a brand’s audience. Sometimes these two halves have very different viewpoints, creating a weak spot in the brand story. Weakness tarnishes credibility. Brands that aren’t credible
        aren’t viable.</p>
      <p>We squash weakness by designing the whole brand story. It’s crafted around the truism held by employees and consumers to create an experience that connects from the inside out.</p>
    </div>
    <!-- col-lg-6 -->
    <div class="col-lg-6">
      <p>By being true to the brand we represent, we elevate the audiences’ relationship to it. Like becomes love becomes a passion. Passion becomes advocacy. And we see the brand blossom from within, creating a whole story the audience embraces. That’s
        when the brand can truly flex its muscles.</p>
      <p><img src="img/signature.png" class="pull-right"></p>
    </div>
    <!-- col-lg-6 -->
  </div>
  <!-- container -->



  <section id="portfolio" name="portfolio"></section>
  <div id="foliowrap">
    <div class="container">
      <h3>Our Work</h3>
      <br>
      <br>
      <div class="row">

        <!-- PORTFOLIO IMAGE 1 -->
        <div class="col-md-4 ">
          <div class="grid mask">
            <figure>
              <img class="img-responsive" src="img/portfolio/folio01.png" alt="">
              <figcaption>
                <h5>DASHBOARD</h5>
                <a data-toggle="modal" href="#myModal" class="btn-primary btn-lg">Take a Look</a>
              </figcaption>
              <!-- /figcaption -->
            </figure>
            <!-- /figure -->
          </div>
          <!-- /grid-mask -->
          <br>
        </div>
        <!-- /col -->


        <!-- MODAL SHOW THE PORTFOLIO IMAGE. In this demo, all links point to this modal. You should create
						      a modal for each of your projects. -->

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Project Title</h4>
              </div>
              <div class="modal-body">
                <p><img class="img-responsive" src="img/portfolio/folio01.png" alt=""></p>
                <p>This project was crafted for Some Name corp. Detail here a little about your job requirements and the tools used. Tell about the challenges faced and what you and your team did to solve it.</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
            <!-- /.modal-content -->
          </div>
          <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->


        <!-- PORTFOLIO IMAGE 2 -->
        <div class="col-md-4">
          <div class="grid mask">
            <figure>
              <img class="img-responsive" src="img/portfolio/folio02.png" alt="">
              <figcaption>
                <h5>UI DESIGN</h5>
                <a data-toggle="modal" href="#myModal" class="btn-primary btn-lg">Take a Look</a>
              </figcaption>
              <!-- /figcaption -->
            </figure>
            <!-- /figure -->
          </div>
          <!-- /grid-mask -->
          <br>
        </div>
        <!-- /col -->

        <!-- PORTFOLIO IMAGE 3 -->
        <div class="col-md-4">
          <div class="grid mask">
            <figure>
              <img class="img-responsive" src="img/portfolio/folio03.png" alt="">
              <figcaption>
                <h5>ANDROID PAGE</h5>
                <a data-toggle="modal" href="#myModal" class="btn-primary btn-lg">Take a Look</a>
              </figcaption>
              <!-- /figcaption -->
            </figure>
            <!-- /figure -->
          </div>
          <!-- /grid-mask -->
          <br>
        </div>
        <!-- /col -->
      </div>
      <!-- /row -->

      <!-- PORTFOLIO IMAGE 4 -->
      <div class="row">
        <div class="col-md-4 ">
          <div class="grid mask">
            <figure>
              <img class="img-responsive" src="img/portfolio/folio04.png" alt="">
              <figcaption>
                <h5>PROFILE</h5>
                <a data-toggle="modal" href="#myModal" class="btn-primary btn-lg">Take a Look</a>
              </figcaption>
              <!-- /figcaption -->
            </figure>
            <!-- /figure -->
          </div>
          <!-- /grid-mask -->
          <br>
        </div>
        <!-- /col -->

        <!-- PORTFOLIO IMAGE 5 -->
        <div class="col-md-4">
          <div class="grid mask">
            <figure>
              <img class="img-responsive" src="img/portfolio/folio05.png" alt="">
              <figcaption>
                <h5>TWITTER STATUS</h5>
                <a data-toggle="modal" href="#myModal" class="btn-primary btn-lg">Take a Look</a>
              </figcaption>
              <!-- /figcaption -->
            </figure>
            <!-- /figure -->
          </div>
          <!-- /grid-mask -->
          <br>
        </div>
        <!-- /col -->

        <!-- PORTFOLIO IMAGE 6 -->
        <div class="col-md-4">
          <div class="grid mask">
            <figure>
              <img class="img-responsive" src="img/portfolio/folio06.png" alt="">
              <figcaption>
                <h5>PHONE MOCKUP</h5>
                <a data-toggle="modal" href="#myModal" class="btn-primary btn-lg">Take a Look</a>
              </figcaption>
              <!-- /figcaption -->
            </figure>
            <!-- /figure -->
          </div>
          <!-- /grid-mask -->
        </div>
        <!-- /col -->
        <br>
      </div>
      <!-- /row -->
    </div>
    <!-- /container -->
  </div>
  <!-- /foliowrap -->

	<div class="tlinks">Collect from <a href="http://www.cssmoban.com/" >建站模板</a></div>
  <section id="blog" name="blog"></section>
  <div class="container">
    <div class="row services">
      <h3>We Are Storytellers</h3>
      <hr>
      <br>
      <br>

      <div class="col-lg-6">
        <!-- ACCORDION -->
        <div class="accordion" id="accordion2">
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                <date>Sep 15, 2013</date>
                <plus> + </plus> First Class Design
              </a>
            </div>
            <!-- /accordion-heading -->
            <div id="collapseOne" class="accordion-body collapse in">
              <br>
              <div class="accordion-inner">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                  book.</p>
                <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
                  with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
                <p><img class="img-circle" src="img/avatar.jpg" height="50px" width="50px"> - <i>Alex Webber.</i></p>
              </div>
              <!-- /accordion-inner -->
            </div>
            <!-- /collapse -->
          </div>
          <!-- /accordion-group -->
          <br>

          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                <date>Sep 10, 2013</date>
                <plus> + </plus> Retina Ready Theme
              </a>
            </div>
            <div id="collapseTwo" class="accordion-body collapse">
              <div class="accordion-inner">
                <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
                  with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
              </div>
              <!-- /accordion-inner -->
            </div>
            <!-- /collapse -->
          </div>
          <!-- /accordion-group -->
          <br>
        </div>
        <!-- Accordion -->
      </div>
      <!-- /col-lg-6 -->

      <div class="col-lg-6">
        <!-- ACCORDION -->
        <div class="accordion" id="accordion1">
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseThree">
                <date>Aug 22, 2013</date>
                <plus> + </plus> We Understand You
              </a>
            </div>
            <!-- /accordion-heading -->
            <div id="collapseThree" class="accordion-body collapse in">
              <br>
              <div class="accordion-inner">

                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                  book.</p>
                <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
                  with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
                <p><img class="img-circle" src="img/avatar02.jpg" height="50px" width="50px"> - <i>Laura Robinson.</i></p>
              </div>
              <!-- /accordion-inner -->
            </div>
            <!-- /collapse -->
          </div>
          <!-- /accordion-group -->
          <br>

          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseFour">
                <date>Aug 10, 2013</date>
                <plus> + </plus> Retina Ready Theme
              </a>
            </div>
            <div id="collapseFour" class="accordion-body collapse">
              <div class="accordion-inner">
                <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
                  with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
              </div>
              <!-- /accordion-inner -->
            </div>
            <!-- /collapse -->
          </div>
          <!-- /accordion-group -->
          <br>
        </div>
        <!-- Accordion -->
      </div>
      <!-- /col-lg-6 -->
    </div>
    <!-- /row -->
  </div>
  <!-- /container -->


  <div id="testimonial">
    <div class="container">
      <div class="bs-example">
        <div id="carousel-example-generic" class="carousel slide bs-docs-carousel-example">
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner">
            <div class="item active">
              <h1>Work with Alex was a pleasure. He understood exactly what I wanted and created an awesome site for my company.</h1>
              <br>
              <h2>Brad Cooper</h2>
            </div>
            <div class="item">
              <h1>I'm really happy with the results. Get 100% satisfaction is difficult but Alex got it without problems.</h1>
              <br>
              <h2>Joan Mathews</h2>
            </div>
            <div class="item">
              <h1>Search no more. Alex is the guy that you need for your next project. Don't waste your time. He's the chosen one.</h1>
              <br>
              <h2>Trevor Bishop</h2>
            </div>
          </div>
          <br>
          <br>
          <br>
        </div>
      </div>
    </div>
  </div>

  <section id="prices" name="prices"></section>
  <div class="container">
    <br>
    <div class="row services">
      <h3>Pricing Lists</h3>
      <hr>
      <br>
      <br>
      <div class="col-lg-3">
        <!-- START PRICING TABLE -->
        <div class="pricing-option">
          <div class="pricing-top">
            <span class="pricing-edition">Starter</span>
            <span class="price">
                            <sup>$</sup>
                            <span class="price-amount">19</span>
            <small>/mo</small>
            </span>
          </div>
          <ul>
            <li><strong>10GB</strong> Storage</li>
            <li>Up to <strong>10</strong> Users</li>
            <li><strong>5</strong> Domains</li>
            <li><strong>Free</strong> Setup</li>
            <li><strong>1-year</strong> Free support *</li>
          </ul>
          <a href="index.html#" class="pricing-signup">Sign up</a>
        </div>
        <!-- /pricing-option -->
        <!-- END PRICING TABLE -->
      </div>
      <!-- /col -->

      <div class="col-lg-3">
        <!-- START PRICING TABLE -->
        <div class="pricing-option">
          <div class="pricing-top">
            <span class="pricing-edition">Standard</span>
            <span class="price">
                            <sup>$</sup>
                            <span class="price-amount">29</span>
            <small>/mo</small>
            </span>
          </div>
          <ul>
            <li><strong>20GB</strong> Storage</li>
            <li>Up to <strong>20</strong> Users</li>
            <li><strong>10</strong> Domains</li>
            <li><strong>Free</strong> Setup</li>
            <li><strong>2-year</strong> Free support *</li>
          </ul>
          <a href="index.html#" class="pricing-signup">Sign up</a>
        </div>
        <!-- /pricing-option -->
        <!-- END PRICING TABLE -->
      </div>
      <!-- /col -->

      <div class="col-lg-3">
        <!-- START PRICING TABLE -->
        <div class="pricing-option">
          <div class="pricing-top">
            <span class="special-label">OFFER!</span>
            <span class="pricing-edition">Ultimate</span>
            <span class="price">
                            <sup>$</sup>
                            <span class="price-amount">69</span>
            <small>/mo</small>
            </span>
          </div>
          <ul>
            <li><strong>150GB</strong> Storage</li>
            <li><strong>Unlimited</strong> Users</li>
            <li><strong>50</strong> Domains</li>
            <li><strong>Free</strong> Setup</li>
            <li><strong>5-year</strong> Free support *</li>
          </ul>
          <a href="index.html#" class="pricing-signup">Sign up</a>
        </div>
        <!-- /pricing-option -->
        <!-- END PRICING TABLE -->
      </div>
      <!-- /col -->

      <div class="col-lg-3">
        <!-- START PRICING TABLE -->
        <div class="pricing-option">
          <div class="pricing-top">
            <span class="pricing-edition">Business</span>
            <span class="price">
                            <sup>$</sup>
                            <span class="price-amount">49</span>
            <small>/mo</small>
            </span>
          </div>
          <!-- /pricing-top -->
          <ul>
            <li><strong>40GB</strong> Storage</li>
            <li>Up to <strong>40</strong> Users</li>
            <li><strong>25</strong> Domains</li>
            <li><strong>Free</strong> Setup</li>
            <li><strong>3-year</strong> Free support *</li>
          </ul>
          <a href="index.html#" class="pricing-signup">Sign up</a>
        </div>
        <!-- /pricing-option -->
        <!-- END PRICING TABLE -->
      </div>
      <!-- /col -->
    </div>
    <!-- /row -->
  </div>
  <!-- /container -->

  <section id="contact" name="contact"></section>
  <div id="footerwrap">
    <div class="container">
      <div class="col-lg-5">
        <h3>Address</h3>
        <p>
          Av. Greenville 987,<br/> New York,<br/> 90873
          <br/> United States
        </p>
      </div>

      <div class="col-lg-7">
        <h3>Drop Me A Line</h3>
        <br>

        <form class="contact-form php-mail-form" role="form" action="contactform/contactform.php" method="POST">

          <div class="form-group">
            <label for="contact-name">Your Name</label>
            <input type="name" name="name" class="form-control" id="contact-name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" >
            <div class="validate"></div>
          </div>
          <div class="form-group">
            <label for="contact-email">Your Email</label>
            <input type="email" name="email" class="form-control" id="contact-email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email">
            <div class="validate"></div>
          </div>
          <div class="form-group">
            <label for="contact-subject">Subject</label>
            <input type="text" name="subject" class="form-control" id="contact-subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject">
            <div class="validate"></div>
          </div>

          <div class="form-group">
            <label for="contact-message">Your Message</label>
            <textarea class="form-control" name="message" id="contact-message" placeholder="Your Message" rows="5" data-rule="required" data-msg="Please write something for us"></textarea>
            <div class="validate"></div>
          </div>

          <div class="loading"></div>
          <div class="error-message"></div>
          <div class="sent-message">Your message has been sent. Thank you!</div>

          <div class="form-send">
            <button type="submit" class="btn btn-large">Send Message</button>
          </div>

        </form>
      </div>

    </div>

  </div>

  <div id="copyrights">
    <div class="container">
      <p>
        &copy; Copyrights <strong>Merit</strong>. All Rights Reserved
      </p>
      <div class="credits">
        More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
      </div>
    </div>
  </div>

  <!-- JavaScript Libraries -->
  <script src="lib/jquery/jquery.min.js"></script>
  <script src="lib/bootstrap/js/bootstrap.min.js"></script>
  <script src="lib/php-mail-form/validate.js"></script>
  <script src="lib/easing/easing.min.js"></script>
  <script src="lib/classie/classie.js"></script>
  <script src="lib/gnmenu/gnmenu.js"></script>

  <!-- Template Main Javascript File -->
  <script src="js/main.js"></script>

</body>
</html>
